<template>
	<view class="resume-container">
		<view class="page-header">
			<text class="header-title">完善简历资料</text>
			<text class="header-subtitle">完善资料，提高求职机会</text>
		</view>

		<view class="form-container">
			<!-- 照片上传 -->
			<view class="item-label">简历照片 </view>
			<view class="form-item" style="display: flex;flex-direction: row;">
				<view class="upload-box" @click="chooseImage">
					<image v-if="formData.photo" :src="formData.photo" mode="aspectFill" class="avatar"></image>
					<view v-else class="upload-placeholder">
						<text class="iconfont icon-camera"></text>
						<text class="upload-text">上传照片</text>
					</view>
				</view>
				<uni-icons v-if="formData.photo" type="closeempty" style="margin-left: 10rpx;"
					@click="formData.photo=''"></uni-icons>

			</view>

			<!-- 工作技能 - 改为复选框 -->
			<view class="form-item">
				<text class="item-label">工作技能</text>
				<view class="checkbox-group">
					<view v-for="(skill, index) in skillOptions" :key="index" @click="toggleSkill(skill)">
						<checkbox :checked="formData.workSkillArray.includes(skill)" />
						<text class="checkbox-text">{{ skill }}</text>
					</view>
				</view>
			</view>

			<!-- 口语技能 -->
			<view class="form-item">
				<text class="item-label">口语技能</text>
				<view class="checkbox-group">
					<view v-for="(skill, index) in speakOptions" :key="index" @click="changeSpeak(skill)"
						style="margin-right: 20rpx;">
						<checkbox :checked="formData.speakSkillArray.includes(skill)" />
						<text class="checkbox-text">{{ skill }}</text>
					</view>
				</view>
			</view>

			<!-- 家乡 -->
			<view class="form-item">
				<text class="item-label">家乡</text>
				<input v-model="formData.hometown" class="input" placeholder="请输入家乡" />
			</view>
			<!-- 自我介绍 -->
			<view class="form-item">
				<text class="item-label">自我介绍</text>
				<textarea v-model="formData.introduction" placeholder="请简短介绍自己" class="textarea" />
			</view>

			<!-- 家庭情况 -->
			<view class="form-item">
				<text class="item-label">家庭情况</text>
				<textarea v-model="formData.family" placeholder="请简述家庭情况" class="textarea" />
			</view>

			<!-- 工作地区 -->
			<view class="form-item">
				<text class="item-label">工作地区</text>
				<view class="location-picker">
					<picker mode="selector" :range="provinces" @change="onProvinceChange" class="picker">
						<view class="picker-value">{{ formData.workProvince || '请选择省份' }}</view>
					</picker>
					<picker mode="selector" :range="cities" @change="onCityChange" class="picker">
						<view class="picker-value">{{ formData.workCity || '请选择城市' }}</view>
					</picker>
				</view>
			</view>


			<!-- 从事的职业 -->
			<view class="form-item">
				<text class="item-label">从事的职业</text>
				<view style="display: flex;flex-direction: row;">
					<view v-for="(career, index) in careerOptions" :key="index" @click="changeCareer(career)"
						style="margin-right: 20rpx;">
						<checkbox :checked="formData.careerArray.includes(career)" />
						<text class="checkbox-text">{{ career }}</text>
					</view>
				</view>
			</view>

			<!-- 期望薪资 -->
			<view class="form-item">
				<text class="item-label">期望薪资(元/月)</text>
				<view class="salary-range">
					<input type="digit" v-model="formData.startPrice" placeholder="最低" class="input salary-input" />
					<text class="salary-separator">至</text>
					<input type="digit" v-model="formData.endPrice" placeholder="最高" class="input salary-input" />
				</view>
			</view>
		</view>

		<!-- 按钮区域 -->
		<view class="btn-group">
			<button class="submit-btn" @click="submitForm">保存简历</button>
			<button class="preview-btn" @click="previewResume">查看简历</button>
		</view>
		<view style="height: 150rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skillOptions: [
					'整理家务',
					'洗衣做饭',
					'高效耐心沟通',
					'老人护理',
					'母婴护理',
					'营养调理',
					'急救',
					'早期教育',
					'行为培养',
					'健康监测'
				],
				speakOptions: [
					'普通话',
					'英语',
					'方言',
					'其他外语'
				],
				careerOptions: [
					'保姆',
					'月嫂',
					'育儿嫂'
				],
				formData: {
					userId: '', // 从登录状态获取
					photo: '',
					workSkill: '',
					workSkillArray: [], // 新增：存储选中的技能数组
					speakSkill: '',
					speakSkillArray: [], // 新增：存储选中的技能数组
					introduction: '',
					family: '',
					workProvince: '',
					workCity: '',
					certificate: 0,
					certList: '',
					career: '',
					careerArray: [], // 新增：存储选中的技能数组
					startPrice: '',
					endPrice: ''
				},
				certificates: [], // 证书列表临时存储
				provinces: ['北京', '上海', '广东', '江苏', '浙江', '四川', '湖北', '河南', '山东', '其他'], // 示例数据
				cities: [], // 根据选择的省份动态加载
				citiesMap: {
					'北京': ['朝阳', '海淀', '丰台', '东城', '西城'],
					'上海': ['黄浦', '静安', '徐汇', '长宁', '杨浦', '虹口', '普陀', '浦东', '宝山', '嘉定', '闵行', '松江', '青浦', '奉贤', '金山', '',
						'', '', '', ''
					],
					'广东': ['广州', '深圳', '佛山', '东莞', '中山', '珠海', '江门', '肇庆'],
					'江苏': ['南京', '苏州', '无锡', '常州', '南通', '扬州'],
					'浙江': ['杭州', '宁波', '温州', '绍兴', '金华', '湖州'],
					'四川': ['成都', '绵阳', '德阳', '自贡', '泸州'],
					'湖北': ['武汉', '宜昌', '襄阳', '荆州', '黄石'],
					'河南': ['郑州', '洛阳', '开封', '南阳', '新乡'],
					'山东': ['济南', '青岛', '烟台', '威海', '淄博'],
					'其他': ['其他']
				}
			};
		},
		onLoad() {

			// 设置导航栏
			uni.setNavigationBarTitle({
				title: '完善简历'
			});

			// uni.setNavigationBarColor({
			// 	frontColor: '#ffffff',
			// 	backgroundColor: '#e74c3c'
			// });
			this.loadAreaMap();
			this.loadResumeData();
		},
		methods: {
			// 切换技能选择
			toggleSkill(skill) {
				const index = this.formData.workSkillArray.indexOf(skill);
				if (index === -1) {
					// 添加技能
					this.formData.workSkillArray.push(skill);
				} else {
					// 移除技能
					this.formData.workSkillArray.splice(index, 1);
				}
				// 更新原workSkill字段，用逗号连接
				this.formData.workSkill = this.formData.workSkillArray.join(',');
			},
			changeSpeak(skill) {
				const index = this.formData.speakSkillArray.indexOf(skill);
				if (index === -1) {
					// 添加技能
					this.formData.speakSkillArray.push(skill);
				} else {
					// 移除技能
					this.formData.speakSkillArray.splice(index, 1);
				}
				// 更新原workSkill字段，用逗号连接
				this.formData.speakSkill = this.formData.speakSkillArray.join(',');
			},
			changeCareer(career) {
				const index = this.formData.careerArray.indexOf(career);
				if (index === -1) {
					// 添加技能
					this.formData.careerArray.push(career);
				} else {
					// 移除技能
					this.formData.careerArray.splice(index, 1);
				}
				// 更新原workSkill字段，用逗号连接
				this.formData.career = this.formData.careerArray.join(',');
			},
			loadAreaMap() {
				this.$Request.postFormHost(this.$Api.getAreaMap)
					.then(
						res => {
							if (res.status == 0) {
								this.provinces = res.data.province;
								this.citiesMap = res.data.cityMap;
							}
						});
			},
			// 加载已有的简历数据
			loadResumeData() {

				uni.showLoading({
					title: '加载中...'
				});
				this.$Request.postFormHost(this.$Api.getUserResume).then(res => {
					if (res.status === 0) {
						const resumeData = res.data;
						if (resumeData) {
							Object.assign(this.formData, resumeData);
							this.formData.workSkillArray = resumeData.workSkill.split(',');
							console.log(this.workSkillArray);
							this.formData.careerArray = resumeData.career.split(',');
							console.log(this.carerArray);
							this.formData.speakSkillArray = resumeData.speakSkill.split(',');
							console.log(this.speakSkillArray);

							// 处理证书列表
							if (resumeData.certList) {
								this.certificates = JSON.parse(resumeData.certList);
							}


							// 加载城市
							if (resumeData.workProvince) {
								this.cities = this.citiesMap[resumeData.workProvince] || [];
							}
						}
					}
					uni.hideLoading();
				})
			},

			// 将下划线式命名转换为驼峰式命名
			toCamelCase(str) {
				return str.replace(/_([a-z])/g, function(match, group) {
					return group.toUpperCase();
				});
			},

			// 选择照片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];

						// 上传图片
						this.uploadImage(tempFilePath);
					}
				});
			},

			// 上传图片
			uploadImage(filePath) {
				uni.showLoading({
					title: '上传中'
				});
				this.$Request.uploadFile(this.$Api.uploadFile, filePath)
					.then(res => {
						if (typeof res === 'string') {
							res = JSON.parse(res);
						}
						if (res.status == 0) {
							this.formData.photo = res.data;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
						} else
							uni.showToast({
								title: "上传失败",
								icon: 'error'
							})
					});

			},

			// 省份选择
			onProvinceChange(e) {
				const provinceIndex = e.detail.value;
				const selectedProvince = this.provinces[provinceIndex];
				this.formData.workProvince = selectedProvince;
				this.formData.workCity = ''; // 重置城市
				this.cities = this.citiesMap[selectedProvince] || [];
			},

			// 城市选择
			onCityChange(e) {
				const cityIndex = e.detail.value;
				this.formData.workCity = this.cities[cityIndex];
			},


			// 预览简历
			previewResume() {
				uni.navigateTo({
					url: '/pages/service/resume'
				})
			},

			// 验证表单
			validateForm() {
				if (!this.formData.workSkill) {
					uni.showToast({
						title: '请填写工作技能',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.introduction) {
					uni.showToast({
						title: '请填写自我介绍',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.workProvince || !this.formData.workCity) {
					uni.showToast({
						title: '请选择工作地区',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.career) {
					uni.showToast({
						title: '请填写从事的职业',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.startPrice || !this.formData.endPrice) {
					uni.showToast({
						title: '请填写期望薪资范围',
						icon: 'none'
					});
					return false;
				}

				if (Number(this.formData.startPrice) > Number(this.formData.endPrice)) {
					uni.showToast({
						title: '最低薪资不能高于最高薪资',
						icon: 'none'
					});
					return false;
				}

				return true;
			},

			// 处理简历数据
			processResumeData() {
				// 处理证书列表
				if (this.formData.certificate === 1 && this.certificates.length > 0) {
					// 过滤空证书
					const validCerts = this.certificates.filter(cert => cert.trim() !== '');
					if (validCerts.length === 0) {
						this.formData.certificate = 0;
						this.formData.certList = '';
					} else {
						this.formData.certList = JSON.stringify(validCerts);
					}
				} else {
					this.formData.certList = '';
				}
			},

			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.validateForm()) {
					return;
				}
				// 处理证书列表
				if (this.formData.certificate === 1 && this.certificates.length > 0) {
					// 过滤空证书
					const validCerts = this.certificates.filter(cert => cert.trim() !== '');
					if (validCerts.length === 0) {
						uni.showToast({
							title: '请至少填写一个证书',
							icon: 'none'
						});
						return;
					}
					this.formData.certList = JSON.stringify(validCerts);
				} else {
					this.formData.certList = '';
				}

				uni.showLoading({
					title: '保存中'
				});

				// 转换薪资为数字类型
				this.formData.startPrice = Number(this.formData.startPrice);
				this.formData.endPrice = Number(this.formData.endPrice);
				this.formData.birthday = '';
				this.$Request.postFormHost(this.$Api.saveResume, this.formData).then(res => {
					if (res.status === 0)
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					else
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

				});
			},

		}
	}
</script>

<style>
	page {
		background: none;
	}

	.resume-container {
		padding: 30rpx;
		/* min-height: 100vh; */
		background: linear-gradient(to bottom, #ffffff, #e73c3ca0);
	}

	.page-header {
		padding: 20rpx 0 40rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #e74c3c;
	}

	.header-subtitle {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.form-container {
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.item-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.input,
	.textarea {
		width: 100%;
		border: 1rpx solid #7f7f7f;
		border-radius: 8rpx;
		padding:
			/* 16rpx */
		;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.textarea {
		height: 160rpx;
	}

	.upload-box {
		width: 180rpx;
		height: 180rpx;
		border: 1rpx dashed #e0e0e0;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.iconfont {
		font-size: 50rpx;
		color: #e74c3c;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
	}

	.location-picker {
		display: flex;
		justify-content: space-between;
	}

	.picker {
		flex: 1;
		margin: 0 10rpx;
	}

	.picker:first-child {
		margin-left: 0;
	}

	.picker:last-child {
		margin-right: 0;
	}

	.picker-value {
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 28rpx;
		color: #333;
	}

	.cert-list {
		margin-top: 10rpx;
	}

	.cert-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.cert-input {
		flex: 1;
	}

	.delete-cert {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #e74c3c;
		font-size: 40rpx;
		margin-left: 10rpx;
	}

	.add-cert-btn {
		background-color: #f8f8f8;
		color: #e74c3c;
		font-size: 28rpx;
		padding: 15rpx 0;
		border-radius: 8rpx;
		border: 1rpx dashed #e0e0e0;
		margin-top: 10rpx;
	}

	.salary-range {
		display: flex;
		align-items: center;
	}

	.salary-input {
		flex: 1;
	}

	.salary-separator {
		margin: 0 20rpx;
		color: #999;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.preview-btn {
		width: 48%;
		background-color: #ee8b00;
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 8rpx;
	}

	.submit-btn {
		width: 48%;
		background-color: #fc3e30;
		color: #fff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 8rpx;
	}

	.checkbox-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 每行3列 */
		line-height: 1.8;

	}
</style>